<%--
  Created by IntelliJ IDEA.
  User: itlaobing
  Date: 2018/9/26
  Time: 11:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <base href="<%=basePath%>">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <meta charset="utf-8" />
    <title>品农商城-用户中心</title>
    <link href="favicon.ico" rel="shortcut icon" type="image/x-icon"/>
    <meta name="keywords" content="通州酒水,通州生鲜,通州水果,通州蔬菜,通州肉,通州蛋,通州促销活动,通州促销产品,北京通糖烟酒糖业有限公司,北京通州区超市"/>
    <meta http-equiv="description" content="北京通州酒水,北京通州生鲜,北京通州促销产品等,北京通州区超市连锁,北京通州区免费送货,北京通州区正品低价、品质保障、配送及时、轻松购物,北京通州品农,北京通州品质"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <base href="file:///D:/HTML/management/">
    <link rel="stylesheet" href="assets/lib/css/bootstrap.min.css" media="screen"/>
    <link rel="stylesheet" href="assets/lib/css/font-awesome.min.css" />
    <link rel="stylesheet" href="assets/lib/css/metrize.css" />
    <link rel="stylesheet" href="assets/lib/css/animate.css" />
    <link rel="stylesheet" href="assets/lib/css/toastr.min.css" />
    <link rel="stylesheet" href="assets/lib/css/bootstrap-datetimepicker.min.css" />
    <link rel="stylesheet" href="assets/lib/css/chosen.min.css" />
    <link rel="stylesheet" href="assets/lib/css/main.css" />
    <link rel="stylesheet" href="assets/lib/css/slidebars.css" />
    <link rel="stylesheet" href="assets/app/css/management/application.css" />
    <!-- HTML5 shiv and Respond.js IE8 support of HTML5 elements and media \ -->
    <!--[if lt IE 9]>
    <script src="assets/lib/js/html5shiv.min.js"></script>
    <script src="assets/lib/js/respond.min.js"></script>
    <![endif]-->

    <%--图片上传css --%>
    <link rel="stylesheet" type="text/css" href="/assets/diyUpload/css/webuploader.css">
    <link rel="stylesheet" type="text/css" href="/assets/diyUpload/css/diyUpload.css">
    <!--图片上传页面样式定义  -->
    <style type="text/css">
        *{ margin:0; padding:0;}
        #box{ width:540px;}
        .dropdown-menu1{
            float: left;
            min-width: 160px;
            padding: 5px 0;
            margin: 2px 0 0;
            font-size: 14px;
            text-align: center;
            list-style: none;
            background-color: #fff;
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
            border: 1px solid #ccc;
            border: 1px solid rgba(0,0,0,.15);
            border-radius: 4px;
            -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
            box-shadow: 0 6px 12px rgba(0,0,0,.175);
        }
    </style>

    <%--提示框--%>
    <link href="/assets/message/css/message.css" rel="stylesheet" type="text/css" />

</head>
<body>
<!--left-->
<%@include file="../common/left.jsp" %>
<!--left-->

<!-- Dashboard Wrapper Start -->
<div class="dashboard-wrapper">
    <!--top-->
    <%@include file="../common/head.jsp"%>
    <!--top-->

    <!-- Right sidebar start -->
    <!-- Right sidebar end -->
    <!-- Main Container Start -->
    <div class="main-container">
        <!-- Top Bar Starts -->
        <div class="top-bar clearfix">

            <div class="page-title">
                <h4>
                    <div class="fs1" aria-hidden="true" data-icon="&#xe0ac;"></div>
                    首页 <a href="#" class="samll">用户中心</a></h4>
            </div>

        </div>
        <!-- Top Bar Ends -->
        <!-- Container fluid Starts -->
        <div class="container-fluid">
            <!-- Spacer starts -->
            <div class="spacer-xs">
                <div class="row no-gutter">
                    <div class="col-md-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4>
                                    <c:if test="${empty img.id}">新建</c:if><c:if test="${not empty img.id}">修改</c:if>头像
                                </h4>
                            </div>
                            <div class="panel-body">
                                <form id="img_form" class="form-horizontal" action="/management/action/saveheadimage" method="post">
                                    <!--  //图片上传插件 -->
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label no-padding-right" >图片上传</label>
                                        <div class="col-sm-10">
                                            <div id="box">
                                                <div id="upload"></div>
                                            </div>
                                            <!-- 将上传的图片地址记下来放到隐藏域中 -->
                                            <div class="queueList">
                                                <input type="hidden" name="systemuserimage" value="${loginuser.systemuserimage}" id="hiddleimg">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-2 control-label no-padding-right" ></label>
                                        <div class="col-xs-12 col-sm-5">
                                            <img src="${loginuser.systemuserimage}" id="imgshow" class="img-responsive">
                                        </div>
                                    </div>


                                    <input type="hidden" name="userid" value="${loginuser.systemuserid}">

                                    <div class="form-group">
                                        <div class="col-sm-2"></div>
                                        <div class="col-xs-12 col-sm-10">
                                                <button type="submit" id="save" class="btn btn-primary btn-sm"> 保存 </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Spacer ends -->
        </div>
        <!-- Container fluid ends -->
    </div>
    <!-- Main Container Start -->
    <!-- Footer Start -->

    <%@include file="../common/foot.jsp" %>
    <!-- Footer end -->
</div>
<!-- Dashboard Wrapper End -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="assets/lib/js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="assets/lib/js/bootstrap.min.js"></script>
<!-- Animated Right Sidebar -->
<script src="assets/lib/js/slidebars.js"></script>
<script src="assets/lib/js/toastr.min.js"></script>
<!-- Date time select -->
<script src="assets/lib/js/moment.min.js"></script>
<script src="assets/lib/js/moment.zh-cn.js"></script>
<script src="assets/lib/js/bootstrap-datetimepicker.min.js"></script>
<script src="assets/lib/js/chosen.jquery.min.js"></script>
<!-- Custom JS -->
<script src="assets/lib/js/custom.js"></script>
<script type="text/javascript">


</script>
<script type="text/javascript" src="assets/app/js/management/application.js"></script>
<!--图片上传js  -->
<script type="text/javascript" src="/assets/diyUpload/js/webuploader.html5only.min.js"></script>
<script type="text/javascript" src="/assets/diyUpload/js/diyUpload.js"></script>


<%--提示框js --%>
<script src="/assets/message/js/message.js"></script>

<script type="text/javascript">
    /*
    * 服务器地址,成功返回,失败返回参数格式依照jquery.ajax习惯;
    * 其他参数同WebUploader
    */
    $('#upload').diyUpload({
        url:'/management/action/upload',
        type:'post',
        success:function(data) {
            var urldata=data.result;

            console.info(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>"+urldata);

            //赋值给隐藏域
            $("#hiddleimg").val(urldata);
            $("#imgshow").attr('src',urldata);
            $.message({
                message:"图片上传成功",
            });
        },
        error:function( err ) {
            $.message({
                message:"图片上传失败",
                type:'error'
            });
        }
    });

    //验证图片是否上传
    $(document).on("click","#save",function () {

        var data = $("#hiddleimg").val();

        if('' == data ){
            $.message({
                message:"您的图片还未上传",
                type:'error'
            });
            return false;
        } else{
            $("#save").attr("disabled",true);
            $("#save").val("保存中...");
            $("#img_form").submit();
        }
    });

</script>

<c:if test="${not empty message}">
    <script type="text/javascript">
        $.message({
            message:"${message}",
            type:'error'
        });
    </script>
</c:if>




<div id="modal-ajax" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content"></div>
    </div>
</div>
</body>
</html>

